<template>
    <div class="w-full h-full flex flex-row">
        <div class="w-56 flex-shrink-0 h-full border-r border-r-primary" v-if="true">
            <PrimarySideView />
        </div>
        <div class="w-64 flex-shrink-0 h-full border-r border-r-primary" v-if="showAssistant && !assistantOnTop">
            <el-scrollbar>
                <AssistantView :onTop="assistantOnTop" />
            </el-scrollbar>
        </div>
        <div class="flex-grow h-full flex flex-col">
            <div class="flex-grow flex flex-col">
                <el-scrollbar>
                    <AssistantView v-if="showAssistant && assistantOnTop" onTop />
                    <MainView />
                </el-scrollbar>
            </div>
            <el-pagination layout="prev, pager, next" :total="50" />
        </div>
        <div class="w-72 flex-shrink-0 h-full border-l border-l-primary" v-if="true">
            <ViceSideView title="镖人镖人镖人镖人镖人镖人镖人镖人镖人镖人镖人" issueId="k7965" country="中国" date="2013" type="漫画"
                :tags="['A-Cap', '武侠', '热血']"
                src="https://img1.baidu.com/it/u=2049364445,2174721833&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=759"
                brief="“镖”，指的是受雇的武夫，其保护的目标，亦指官府悬赏通缉的目标。隋末民乱前夕，江湖上掀起了一阵腥风血雨，各路人马的恩怨情仇逐渐展开。" />
        </div>
    </div>
</template>

<script setup lang="ts">
import PrimarySideView from './PrimarySideView.vue'
import AssistantView from './AssistantView.vue'
import ViceSideView from './ViceSideView.vue'
import MainView from './MainView.vue'
import { ref } from 'vue';

const showAssistant = ref(true);
const assistantOnTop = ref(true)
</script>
